<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title th:text="#{brokerindexpage.title}"></title>
        <meta name="description" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
        
        <!--[if lte IE 9]>
        <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" />
        <![endif]-->

		<link rel="stylesheet" href="css/css.css" th:href="@{/css/min.css}"/>            
        <script src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.min.js" th:src="@{http://lib.sinaapp.com/js/jquery/1.9.0/jquery.min.js}"></script>
        <script th:inline="javascript">/*<![CDATA[*/
        window.jQuery || document.write('<script src="'+ /*[[@{/js/vendor/jquery-1.9.0.min.js}]]*/ 'js/vendor/jquery-1.9.0.min.js'
        		+'"><\/script>')
        /*]]>*/</script>
        <script type="text/javascript" th:src="@{/js/econgen.js}"></script>
        <script th:inline="javascript">/*<![CDATA[*/
        /*]]>*/</script>
    </head>
    <body>
        <header th:substituteby="common/template::header"></header>
        
        <div class="pattern-top">
        	<div class="row">
        		<h1 th:text="#{brokerindexpage.content.title}"></h1>
        		<h2 th:text="#{brokerindexpage.content.subtitle}"></h2>
        		<p th:text="#{brokerindexpage.content.title.content}"></p>
        	</div>
        </div>
		<div class="container">
			<div class="row">
				<ul class="broker-list">
					<li th:each="broker, itemState: ${brokerList}" th:data="${broker.id}" th:class="${itemState.count%4}==0?'threecol last':'threecol'">
						<a th:href="@{'/broker/broker/' + ${broker.id}}" target="_blank">
							<div class="bordered"><img src="" th:src="@{'/images/broker/' + ${broker.brokerImgUrl}}"/></div>
							<div class="bordered align-center" th:text="${broker.name}"></div>
							<div class="bordered">
								<ul>
									<li><span th:text="#{brokerindexpage.content.broker.regulation}"></span><span th:text="${broker.regulationInfo}"></span></li>
									<li><span th:text="#{brokerindexpage.content.broker.minOpen}"></span><span th:text="'$' + ${broker.minOpen}"></span></li>
									<li><span th:text="#{brokerindexpage.content.broker.minTrade}"></span><span th:text="${broker.minTrade}"></span></li>
									<li><span th:text="#{brokerindexpage.content.broker.maxLeverage}"></span><span th:text="'1:' + ${broker.maxLeverage}"></span></li>
								</ul>
							</div>
						</a>
					</li>
				</ul>
			</div>
			<div class="row">
				<h4 style="margin-bottom: 0;" th:text="#{brokerindexpage.content.declaration}"></h4>
				<h6 style="margin-top: 0;" th:utext="#{brokerindexpage.content.declarationcontent}"></h6>
			</div>
		</div>

        <footer th:substituteby="common/template::footer"></footer>
        
    </body>
</html>
